<template>
  <div class="contaner">
    <!-- sku详详情弹框 -->
    <el-dialog :title="skuTitie" :visible.sync="skuDialog" width='90%' append-to-body>
      <div id="skuRrapp">
        <div class="dynamicDataRow" style="grid-row: span 2;">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[0].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[0].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[1].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[1].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[2].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[2].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[3].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[3].value }}</div>
        </div>
        <div class="dynamicDataRow" style="grid-row: span 2;">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[4].label }}:11</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[4].value }}11</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[5].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[5].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[6].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[6].value }}</div>
        </div>
        <div class="dynamicDataRow" style="grid-column: span 2;">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[7].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[7].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[8].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[8].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[9].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[9].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[10].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[10].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[11].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[11].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[12].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[12].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[13].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[13].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[14].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[14].value }}</div>
        </div>
        <div class="dynamicDataRow" style="grid-row: span 3;">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[15].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[15].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[16].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[16].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[17].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[17].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[18].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[18].value }}</div>
        </div>
        <div class="dynamicDataRow" style="grid-row: span 3;">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[19].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[19].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[20].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[20].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[21].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[21].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[22].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[22].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[23].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[23].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[24].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[24].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[25].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[25].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[26].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[26].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[27].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[27].value }}</div>
        </div>
        <div class="dynamicDataRow">
          <div class="dynamicDataRowBoderLabel">{{ dynamicDataStructure[28].label }}:</div>
          <div class="dynamicDataRowBoderValue">{{ dynamicDataStructure[28].value }}</div>
        </div>
      </div>
      <!-- 原生 -->
      <div style="margin-top: 5px;">
        <!-- sku详详情弹框 -->
        <div>
          <!-- 共用产品modal  -->
          <div id="detailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"
            aria-hidden="true" data-backdrop="static" data-keyboard="true">
            <div class="modal-dialog" style="width: 100%;">
              <div class="modal-content">

                <div id="detailModalBody" class="modal-body ">
                  <div class="sku_content">
                    <div class="content_top">
                      <div class="content_top_left">
                        <table style="width: 100%;table-layout:fixed;" class="table table-bordered table-hover">
                          <tr>
                            <td class="content_col star">
                              商品SKU详情：
                            </td>
                            <td class="content_col">

                              <div>
                                <el-input v-model="warehouseInformationDetail.sku" type="text" class="form-control"
                                  placeholder="例 F-(999)" />
                              </div>
                            </td>
                            <td class="content_col">
                              仓库库位:
                            </td>
                            <td class="content_col">
                              {{ warehouseInformationDetail.warehouseSku }}
                            </td>
                          </tr>
                          <tr>
                            <td class="content_col" rowspan="2">
                              商品名称:
                            </td>
                            <td class="content_col">
                              中文
                            </td>
                            <td class="content_col">
                              日语
                            </td>
                            <td class="content_col">
                              英语
                            </td>
                          </tr>
                          <tr>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.nameCn" type="text" class="form-control"
                                placeholder="中文名" />
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.nameJp" type="text" class="form-control"
                                placeholder="日文名" />
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.nameEn" type="text" class="form-control"
                                placeholder="英文名" />
                            </td>
                          </tr>
                          <tr>
                            <td class="content_col">
                              商品用途:
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.useCn" type="text" class="form-control"
                                placeholder="用途(中文)" />
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.useJp" type="text" class="form-control"
                                placeholder="用途(日语)" />
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.useEn" type="text" class="form-control"
                                placeholder="用途(英语)" />
                            </td>
                          </tr>
                          <tr>
                            <td class="content_col">
                              商品材质:
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.materialCn" type="text" class="form-control"
                                placeholder="用途(中文)" />
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.materialJp" type="text" class="form-control"
                                placeholder="用途(日语)" />
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.materialEn" type="text" class="form-control"
                                placeholder="用途(英语)" />
                            </td>
                          </tr>
                          <tr>
                            <td class="content_col">
                              JAN 编码：
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.janCode" type="text" class="form-control"
                                placeholder="JAN 编码" />
                            </td>
                            <td class="content_col">
                              HS 编 码:
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.hsCode" type="text" class="form-control"
                                placeholder="HS编码" />
                            </td>
                          </tr>
                          <tr>
                            <td class="content_col">
                              商品颜色:
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.stockSite" type="text" class="form-control"
                                placeholder="商品颜色" />
                            </td>
                            <td class="content_col">
                              商品分类:
                            </td>
                            <td class="content_col">
                              <el-input v-model="warehouseInformationDetail.category" type="text" class="form-control"
                                placeholder="电脑/IT›游戏摇杆" />
                            </td>
                          </tr>
                        </table>
                      </div>

                    </div>


                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>

        <!-- 图片列表 -->
        <imageList ref="imageList"></imageList>
        <!-- 采购单列表 -->
        <PurchaseNote ref="PurchaseNote"></PurchaseNote>
        <!-- 出入库记录 -->
        <StockStockOutRecord ref="stockStockOutRecord"></StockStockOutRecord>
        <!-- 亚马逊链接详情 -->
        <AmazonlatformLink ref="AmazonlatformLink"></AmazonlatformLink>
        <!--添加亚马逊链接详情 -->
        <AddAmazonlatformLink ref="AddAmazonlatformLink"></AddAmazonlatformLink>
        <!-- 产品规格 -->
        <ProductStandard ref="ProductStandard"></ProductStandard>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSkuDistributorDetails } from "@/api/distribution/sku/shopSkuPair";
import imageList from './component/ImageList'
import ImageUpload from '@/components/ImageUpload'
import PurchaseNote from './component/PurchaseNote'
import StockStockOutRecord from './component/stockStockOutRecord'
import AmazonlatformLink from './component/AmazonlatformLink'
import AddAmazonlatformLink from './component/AddAmazonlatformLink'
import ProductStandard from './component/ProductStandard'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  data() {
    return {
      skuDialog: false,
      dynamicDataStructure: [
        {
          name: "skuNo",
          isWhite: false,
          whiteType: 'el-input',
          label: 'sku编号',
          value: '',
        },
        {
          name: 'expireTime',
          isWhite: false,
          whiteType: 'el-input',
          label: 'SKU过期时间',
          value: '',
        },
        {
          name: 'hsCode',
          isWhite: true,
          whiteType: 'el-input',
          label: 'HS编码',
          value: '',
        },
        {
          name: 'janCode',
          isWhite: true,
          whiteType: 'el-input',
          label: 'janCode编号',
          value: '',
        },
        {
          name: 'sellPrice',
          isWhite: false,
          whiteType: 'el-input',
          label: '售价',
          value: '',
        },
        {
          name: 'costPrice',
          isWhite: false,
          whiteType: 'el-input',
          label: '成本价',
          value: '',
        },
        {
          name: 'purchasePrice',
          isWhite: false,
          whiteType: 'el-input',
          label: '进货价',
          value: '',
        },
        {
          name: 'category',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品分类',
          value: '',
        },
        {
          name: 'asinCode',
          isWhite: true,
          whiteType: 'el-input',
          label: '亚马逊链接地址',
          value: '',
        },
        {
          name: 'skuDesc',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品描述',
          value: '',
        },
        {
          name: 'skuNameCn',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品名称-中文',
          value: '',
        },
        {
          name: 'skuNameJp',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品名称-日文',
          value: '',
        },
        {
          name: 'skuNameEn',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品名称-英文',
          value: '',
        },
        {
          name: 'skuUseCn',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品用途-中文',
          value: '',
        },
        {
          name: 'skuUseJp',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品用途-日文',
          value: '',
        },
        {
          name: 'skuUseEn',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品用途-英文',
          value: '',
        },
        {
          name: 'skuMaterialJp',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品材质-日文',
          value: '',
        },
        {
          name: 'skuMaterialCn',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品材质-中文',
          value: '',
        },
        {
          name: 'skuMaterialEn',
          isWhite: true,
          whiteType: 'el-input',
          label: '商品材质-英文',
          value: '',
        },
        {
          name: 'totalStock',
          isWhite: false,
          whiteType: 'el-input',
          label: 'SKU总库存',
          value: '',
        },
        {
          name: 'cloudStock',
          isWhite: false,
          whiteType: 'el-input',
          label: 'SKU云库存',
          value: '',
        },
        {
          name: 'specification',
          isWhite: true,
          whiteType: 'el-input',
          label: '规格型号',
          value: '',
        },
        {
          name: 'box',
          isWhite: true,
          whiteType: 'el-input',
          label: '箱规',
          value: '',
        },
        {
          name: 'isExpired',
          isWhite: true,
          whiteType: 'el-input',
          label: '产品是否会过期',
          value: '',
        },
        {
          name: 'tariffRate',
          isWhite: true,
          whiteType: 'el-input',
          label: '关税税率',
          value: '',
        },
        {
          name: '关税税率',
          isWhite: false,
          whiteType: 'el-input',
          label: '关税金额',
          value: '',
        },
        {
          name: 'consumeRate',
          isWhite: true,
          whiteType: 'el-input',
          label: '消费税率',
          value: '',
        },
        {
          name: 'consumeAmount',
          isWhite: false,
          whiteType: 'el-input',
          label: '消费金额',
          value: '',
        },
        {
          name: 'remark',
          isWhite: true,
          whiteType: 'el-input',
          label: '备注',
          value: '',
        },
      ],
      // 原生表格数据
      cunrentImage: '',
      // sku弹框的标题
      warehouseInformationDetail: {
        nameCn: '张三',
        nameJp: 'ちょうさんりし',
        nameEn: 'JoniJ',
        sku: 'sku231233',
        warehouseSku: 'H-(1150)',
        useCn: '生活用品',
        useJp: 'せいかつ',
        useEn: 'articles of daily use',
        materialCn: '塑料',
        materialJp: 'ぷらすとま',
        materialEn: 'plastic',
        janCode: 'Jancode44464',
        hsCode: 'hs125534554',
        stockSite: '红色',
        category: '电子设备',
        imageUrl: 'https://m.media-amazon.com/images/I/71OA2Mi4woL._AC_SX569_.jpg',
        purchaseDate: '2023-11-13',
        saleCount30Day: 10000,
        priceWithShip: 1000000,
        purchasePrice: 1000,
        shipPrice: 11013,
        mergeCost: 1300,
        countStock: 2000,
        cloudCount: 62222,
        tariff: 65,
        tariffFee: 456,
        tax: 55,
        taxFee: 212,
        remarks: '贵重物品轻拿轻放'

      },
      skuCalShipPrice: {
        nameCommon: '',
        priceCommon: 100000,
        sendFromCommon: '东京',
        nameQuick: 'sjk',
        priceQuick: 202120,
        sendFromFast: '青冈',
        shipDateCommon: 20,
        shipDateQuick: 15,
        remarks1: '壊れ物，取扱注意'
      }, // 详细信息
      warehousesupplierinformation: {
        supplier: 'SKT',
        phone1: '01545454',
        skuTemplateList: [],
        dutyPerson: '蔡国庆',
        dutyPerson: '王建军',
        dutyPhone1: 151856165,
        address1: '重庆市沙坪坝区大学城智谷',
        website1: ' https://www.amazon.co.jp/dp/B01EZIHXRA',
        cnSendFrom: '重庆市果园港口',
        toJpMethod: '空运',
        remarks2: '贵重物品',
        sendFromCommon: '索尼克重庆仓',
      }, // 供应商
      defaultSupplier: 'oppo', // 默认供应商
      exchangeRate: '1:700',
      sendJpRate: 0, // 国内发货倍率
      commonSendPrice: 0, // 普通发货总价
      quickSendPrice: 0 // 快速发货总价
    }
  },
  props: {
    childrenSkuId: {
      type: Number,
      default: null
    },
    skuTitie: {
      type: String,
      default: '修改'
    }
  },
  components: {
    imageList,
    ImageUpload,
    PurchaseNote,
    StockStockOutRecord,
    AmazonlatformLink,
    AddAmazonlatformLink,
    ProductStandard
  },
  created() {
  },
  mounted() {

  },
  methods: {
    // 获取到当前上传的图片
    getCurentImage(img) {
      console.log(img, 'ssss');
    },
    // 保存修改信息
    submitForm() { },
    // 关闭sku弹框页面
    cancel() {
      this.$emit('closeDialog');
      this.skuDialog = !this.skuDialog
    },
    showSku() {
      getSkuDistributorDetails({ skuDistributorId: this.childrenSkuId }).then((res) => {
        this.skuData = res
        this.dynamicDataStructure.forEach((item) => {
          for (const skuVokey in this.skuData.skuVo) {
            console.log(skuVokey, item.name);
            if (skuVokey == item.name) {
              item.value = this.skuData.skuVo[skuVokey]
            }
          }

        })



      })
    },
    // 处理数据确定展示编辑类型


  },
  watch: {
    skuDialog: function (show) {
      if (show) {
        this.showSku()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload--picture-card {
  width: 100%;
  height: 45px;
  line-height: 45px;

  .el-icon-plus {
    font-size: 14px;
  }
}

::v-deep .el-dialog__body {
  padding: 10px 20px 0 20px;
}

.star::after {
  content: "*";
  color: red;
}

.table>tbody>tr>td {
  vertical-align: middle;
  padding: 4px;
}

.form-control {
  padding: 4px 4px;
}

::v-deep .form-control {
  height: 40px;

  &>.el-input__inner {
    height: 100%;
  }
}

.input_td {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content_top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.content_mid {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.content_bottom {
  width: 100%;
  margin-top: 10px;
}

.content_top_left {
  background: #f4faff;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.content_top_right {
  background: #f4faff;
  display: flex;
  justify-content: flex-start ;
  width: 50%;
}

.content_col {
  width: 25%;
  height: 37px;
  text-align: center;
  vertical-align: middle;

}

.table {
  border-collapse: collapse;
}

table td,
table th {
  padding: 0;
}

td {
  text-align: center;
}

.table-bordered {
  border: 1px solid #ddd !important;
}

.table-bordered {
  td {
    border: 1px solid #ddd !important;
    padding: 2px;
    // height: 45px;
  }
}

#skuRrapp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-auto-flow: row;
  border-radius: 2px;

  .dynamicDataRow:hover {
    background-color: rgb(245, 246, 247);
  }

  .dynamicDataRow {
    display: flex;
    font-size: 14px;

    .dynamicDataRowBoderNone {
      border-radius: 1px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: solid 1px #ddd;
      padding: 6px 6px;
      width: 100%;
      overflow-y: scroll;

    }

    .dynamicDataRowBoderNone::-webkit-scrollbar {
      width: 0;
    }

    .dynamicDataRowBoderLabel {
      text-align: center;
      border-radius: 2px;
      background-color: #f4faff;
      ;
      display: flex;
      justify-content: center;
      align-items: center;
      border: solid 1px #ddd;
      padding: 2px 4px;
      flex: 1;
    }

    .dynamicDataRowBoderValue {
      // background-color: #f3f3f1;
      border-radius: 1px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: solid 1px #ddd;
      padding: 6px 6px;
      min-height: 30px;
      flex: 2;
      overflow-y: scroll;

    }

    .dynamicDataRowBoderValue::-webkit-scrollbar {
      width: 0;
    }
  }
}
</style>
